<template>
	<view class="landlord">
		<view class="landlord-bg">
			<view class="landlord-nav">
				<image class="return" src="/static/icon/return.png"></image>
				<image class="search" src="/static/icon/icon_01.png"></image>
				<image class="more" src="/static/icon/icon_02.png"></image>
			</view>
			<image class="avatar" src="/static/img/landlord.png"></image>
			
			<view v-if="agentInfo.is_attention == 0" class="like" @click="attention" :data-agent_id="agentInfo.id">关注</view>
			
			<view v-else class="like" @click="attentionCancel" :data-agent_id="agentInfo.id">取消关注</view>				
							
		</view>
		
		<view class="info">
			<view class="name" id="name">{{agentInfo.nickname}}</view>
			<image src="/static/img/good.png"></image>
		</view>
		<view class="fans" id="fans"><font style="color:#373737;">{{agentInfo.fans}}</font>粉丝</view>
		<view class="xian"></view>
		
		
			
			<view class="uni-padding-wrap uni-common-mt" style="width:100%">
				<view>
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">												
						<li class="scroll-view-item_H uni-bg-red" :class="tabIndex==index ? 'border-class' : ''"  v-for="(item,index) in houseList.area" :data-current="index"  :id="item.area_id"     @click="click" ref="aa">
							{{item.name}}
						</li>																										
					</scroll-view>
				</view>
			</view>
			
		
		
		<view class="content-bg">
			<view class="content">
				<navigator :url="'../discover/houseDetail?house_id='+item.Id" v-for="(item,index) in houseList.house">				
				<view class="house-list" >
					<image v-if="item.image" :src="siteUrl+item.image"></image>
					<image v-else :src="siteUrl+item.images.split(',',1)"></image>
					
					
					
					<view class="title">{{item.title}}</view>
					<view class="site">
						<image src="/static/icon/site2.png"></image>
						<view class="note">{{item.location_near}}</view>
					</view>
					<view class="price">{{item.price}} <font style="color:#373737;">元/月</font></view>
				</view>
				</navigator>
			</view>
		</view>
		<mpopup  ref="mpopup" :isdistance="true"></mpopup>  
	</view>
	
	
</template>

<script>
	import mpopup from '../../components/xuan-popup/xuan-popup.vue'
	var _self;
	// const dom = weex.requireModule('dom');
	export default {
		components:{
			mpopup
		},
		data() {
			return {
				siteUrl:this.websiteUrl,
				title: 'Hello',
				agentInfo:[],
				houseList:[],
				tabIndex: 0,
				area_id:3,
				agent_id:0,
				//default:false
			}
		},
		onLoad:function(e) {			
			_self = this;
			//_self.default = true
			_self.agent_id = e.agent_id
			this.getagentInfo(e.agent_id)
			//console.log(this.areaInfo())			
			this.house(1)
		    
		},
	
		
		//onReady() {
			 //const result = dom.getComponentRect(this.$refs.aa,option => {
			       // console.log('getComponentRect:', option)
			        //_self.size = option.size
				  //  console.log(option)
			    //  })
	//	},
		
		
		methods: {
			
			click(e){						  			  
			// for (var i = 0, lenI = _self.$refs.aa.length; i < lenI; ++i) {
			  //  _self.$refs.aa[i].style.borderBottom = "none"
			// }			  		  
			//_self.$refs.aa[$index].style.borderBottom = "#007AFF 2px solid"
			//this.$refs.aa[$index].style.borderBottom = "#007AFF 2px solid" 
			//this.$nextTick(() => {
			      // this.$refs.aa[$index].style.borderBottom = "#007AFF 2px solid" 
				  // console.log(123)
				  // console.log(this.$refs.aa[$index].style)
			//})
			//
			//console.log(this.$refs.aa[$index].style)
			
			//console.log(e.currentTarget.dataset.current)
			//console.log(e)
			this.tabIndex = e.currentTarget.dataset.current
			_self.area_id = e.currentTarget.id
			this.house()				
			},						
			house($mid = 0){
				uni.request({
					url: this.websiteUrl+'/userapi.php/center_agent/houseList',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {
						mid:$mid,
						agent_id:_self.agent_id,
						area_id: _self.area_id
					},
					success: res => {
						if(res.data.code == 1){
							_self.houseList = res.data.data	
							_self.area_id = res.data.data.area[0].area_id							
						}												
					},
					fail: () => {},
					complete: () => {}
				});		
			},
			getagentInfo($agentId){				
				uni.request({
					url: this.websiteUrl+'/userapi.php/center_agent/index',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					method: 'POST',
					data: {
						token : uni.getStorageSync("token"),
						agent_id : $agentId
					},
					success: function(res){
						if(res.data.code == 1){
							_self.agentInfo = res.data.data;							
						}
					},					
				});
			},
			attention(e){  //关注				
				_self = this;
				var agentId = e.target.dataset.agent_id;
				uni.request({
					url: this.websiteUrl+'/userapi.php/center_agent/attention',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					method: 'POST',
					data: {
						token:uni.getStorageSync('token'),
						agent_id:agentId,
						action:'add'
					},
					success: function(res){
						if(res.data.code == 1){
							
							_self.$refs.mpopup.open({
									type:'success',
									content:res.data.msg,
									timeout:2000,
							});
							//更新按钮状态
							_self.agentInfo['is_attention'] =1;		
							//更新粉丝数量
							_self.agentInfo['fans'] = _self.agentInfo['fans'] + 1;																						
						}else{
							_self.$refs.mpopup.open({
									type:'info',
									content:res.data.msg,
									timeout:2000,
							});							
						}
					},
					
				});
			},
			attentionCancel(e){  //取消关注
				
				_self = this;
				var agentId = e.target.dataset.agent_id;
				uni.request({
					url: this.websiteUrl+'/userapi.php/center_agent/attention',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					method: 'POST',
					data: {
						token:uni.getStorageSync('token'),
						agent_id:agentId,
						action:'cancel'
					},
					success: function(res){
						if(res.data.code == 1){
							_self.$refs.mpopup.open({
									type:'success',
									content:res.data.msg,
									timeout:2000,
							});
							_self.agentInfo['is_attention'] = 0;
							_self.agentInfo['fans'] = _self.agentInfo['fans'] - 1;
						}else{
							_self.$refs.mpopup.open({
									type:'info',
									content:res.data.msg,
									timeout:2000,
							});
						}
					},					
				});					
			}		

		}
	}
</script>

<style>
	
	.border-class{
		border-bottom:2px #007AFF solid;
	}
	.scroll-Y {
		height: 300upx;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item {
		height: 300upx;
		line-height: 300upx;
		text-align: center;
		font-size: 36upx;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		
		width: 20%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36upx;
	}
	
	

	.landlord {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height:100%;
	}
	
	.landlord-bg{
		width:100%;
		height:260rpx;
		background: url('../../static/img/landlordbg.png');
		position:relative;
	}
	
	.landlord-bg .landlord-nav{
		position:absolute;
		left:0rpx;
		top: 88rpx;
		width: 100%;
		height: 40rpx;
		position:relative;
	}
	
	.landlord-nav .return{
		width:15rpx;
		height:30rpx;
		position:absolute;
		left:32rpx;
		top:5rpx;
	}
	
	.landlord-nav .search{
		width:40rpx;
		height:40rpx;
		position:absolute;
		left:600rpx;
		top:0rpx;
	}
	
	.landlord-nav .more{
		width:40rpx;
		height:40rpx;
		position:absolute;
		left:680rpx;
		top:0rpx;
	}

	.landlord-bg .avatar{
		width:160rpx;
		height: 160rpx;
		position:absolute;
		top:196rpx;
		left:28rpx;
	}
	
	.landlord-bg .like{
		width:152rpx;
		height: 72rpx;
		position:absolute;
		top:292rpx;
		left:566rpx;
		color:white;
		font-size:26rpx;
		line-height: 72rpx;
		background: #FF984C;
		border-radius: 86rpx;
		text-align:center;
	}
	
	.info{
		width:100%;
		height:68rpx;
		line-height: 68rpx;
		margin-top:116rpx;
	}
	.info .name{
		font-size:48rpx;
		color:#373737;
		margin-left:32rpx;
		float:left;
	}
	
	.info image{
		width:128rpx;
		height: 34rpx;
		margin-left:20rpx;
		float:left;
		margin-top:17rpx;
	}
	.fans{
		width:100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size:32rpx;
		margin-left:60rpx;
		color:grey;
		margin-top:16rpx;
	}
	.xian{
		width:100%;
		height:1rpx;
		margin-top:40rpx;
		border:1rpx solid #F6F6F6;
	}
	
	.cate{
		width:100%;
		height: 100rpx;
		line-height:100rpx;
		list-style-type: none;
	}
	.cate li{
		float:left;
		color:#999999;
		font-size:30rpx;
		width:auto;
		height: 100rpx;
		margin-right:80rpx;
		
	}
	
	.cate li .note{
		width:100%;
		height: 26rpx;
	}
    .cate li image{
		width:60rpx;
		height:8rpx;
		margin-left:20rpx;
	}	
	
	.content-bg{
		margin-top:10rpx;
		background:#E5E5E5;
		width:100%;
		height: 910rpx;
		display: flex;
		position:relative;
		overflow: hidden;
	}
	
	.content{
		width:686rpx;
		height: 100%;
		position:absolute;
		left:32rpx;
		top:32rpx;
	}
	
	
	.house-list{
		width:332rpx;
		height: 418rpx;
		float:left;
		background: white;
		border-radius: 8px 8px 0px 0px;
		margin-left:10rpx;
		margin-bottom:20rpx;
	}
	
	.house-list image{
		width:100%;
		height: 220rpx;
	}
	
	.house-list .title{
		width:auto;
		height: auto;
		font-size:28rpx;
		color:#373737;
		margin-top:24rpx;
		margin-left:16rpx;
	}
	
	.house-list .site{
		width:100%;
		height:34rpx;
		margin-top:12rpx;
		margin-left:16rpx;
	}
	
	.house-list .site image{
		width:28rpx;
		height: 28rpx;
		float:left;
	}
	
	.house-list .site .note{
		width:200rpx;
		height:34rpx;
		line-height: 34rpx;
		font-size:24rpx;
		color:#999999;
		float:left;
	}
	
	.price{
		font-size:32rpx;
		color:#FF635C;
		margin-top:24rpx;
		margin-left:16rpx;
	}
	
</style>
